<template>
    <el-dialog v-model="dialogVisible" title="添加保司" width="500px" destroy-on-close :close-on-click-modal="false">
        <div>
            <el-form ref="formRef" :model="formData" :rules="rules" label-position="top" class="">
                <el-form-item v-for="(i, index) in formData" :key="index" :label="i.label" :prop="`${i.prop}.value`">
                    <el-input v-if="i.type === 'input'" v-model="i.value" :type="i.inputType || 'text'"
                        :placeholder="i.placeholder" />
                    <div v-if="i.type === 'uploadImage'" class="w-full">
                        <uploadImage class="w-full" v-model:base64-file="formData.logo.value"
                            :file-url="formData.logo.valueUrl" />
                        <div class="flex items-center set-margin">
                            <div class="fc-primary fs-12 flex items-center"><el-icon>
                                    <Upload />
                                </el-icon>上传附件</div>
                            <div class="fc-lightgrey fs-12 mg-l-20">大小限制为5M</div>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="flex flex-jc-c">
                <div class="flex">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit">
                        确定
                    </el-button>
                </div>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, watch, computed } from 'vue'
import { cloneDeep } from 'lodash'
import { ElMessage } from 'element-plus'

import uploadImage from '@/components/uploadImage/index.vue'

import { addInsureCompany } from 'api/insure/longTerm.ts'
const formRef = ref(null)

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    // 类型: add: 新增   update: 修改
    type: {
        type: String,
        default: 'add'
    },
    curItem: {
        type: Object
    }
})

const emits = defineEmits(['update:show', 'success'])

const dialogVisible = ref(false)

const formDataBase = {
    name: {
        label: '保司名称',
        prop: 'name',
        type: 'input',
        placeholder: '请输入保司名称',
        inputType: 'text',
        value: ''
    },
    code: {
        label: '保司编码',
        prop: 'code',
        type: 'input',
        placeholder: '请输入保司编码',
        inputType: 'text',
        value: ''
    },
    logo: {
        label: '保司logo',
        prop: 'logo',
        type: 'uploadImage',
        value: ''
    }
}

const formData = ref()

formData.value = cloneDeep(formDataBase)

const rules = ref({
    'name.value': [
        {
            required: true,
            trigger: 'blur',
            message: '保司名称不能为空'
        }
    ],
    'code.value': [
        {
            required: true,
            trigger: 'blur',
            message: '保司编码不能为空'
        }
    ],
    'logo.value': [
        {
            required: true,
            trigger: 'blur',
            message: '保司logo不能为空'
        }
    ],
})


const submit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            handleAddAccount()
        } else {
            console.log('error submit!')
            return false
        }
    })
}

const handleAddAccount = (type) => {
    const data = {
        type: 2
    }
    for (const key in formData.value) {
        data[formData.value[key].prop] = formData.value[key].value
    }
    addInsureCompany(data).then(res => {
        console.log(res)
        emits('success')
        ElMessage({
            message: '新增成功',
            type: 'success',
        })
        dialogVisible.value = false
    })
}

const initForm = () => {
    for (const key in formData.value) {
        formData.value[key].value = ''
    }
}

watch(() => props.show, (newval) => {
    dialogVisible.value = newval
    if (newval && props.type === 'add') {
        formData.value = cloneDeep(formDataBase)
    }
})

watch(dialogVisible, (newval) => {
    emits('update:show', newval)
    if (!newval) {
        formRef.value.resetFields()
    }
})

// watch(() => props.curItem, (newval) => {
//     if (newval) {
//         for (const key in formData.value) {
//             formData.value[key].value = newval[key]
//         }
//     }
// }, {
//     immediate: true,
//     deep: true
// })

</script>
<style lang="scss" scoped>
.bg-gray {
    background: #fafafc;
}

.table-item {
    height: 40px;
    line-height: 40px;
    border-top: 1px solid $borderColor;
    cursor: move;
}

.table-head {
    height: 40px;
    line-height: 40px;
}
</style>